<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>刘天平-注册页面</title>
		<style type="text/css">
			body{background-color: #F9F9F9;}
			*{padding: 0;margin: 0;}
			.body{width:855px;height: 650px;margin: 0 auto;background-color: white;}
		.div1{width:66px;margin: 0 auto;}
		.span1{font-size: 33px;font-family: '微软雅黑';
		display: block;width:200px ;margin: 0 auto;margin-top: 50px;}
		.main{width: 340px;margin: 0 auto;margin-top: 40px;font-size: 14px;color: grey;}
		.div2{display: inline-block;width:292px ;float: left;position: relative;}
		#text1{outline: none;font-family: "微软雅黑";
			height: 40px;width: 290px;border: 1px #E0E0E0  solid;}
			.listcontry{color: black;font-family: "微软雅黑"; position: absolute;display: none;
			height: 160px;width: 292px;overflow: auto;background-color: white;}
		.listcontry dd{border-bottom: 1px  #E0E0E0 solid;height: 40px;line-height: 40px;cursor: pointer;}
	.img2 img{width: 40px;height: 42px;display: inline-block;}
		.div3{width: 332px;height: 20px;margin-bottom: 20px;}
		.div4{width: 332px;height: 57px;padding-bottom: 17px;}
		.num{width: 70px;height: 42px;display: inline-block;line-height: 42px;
		float: left;text-align: center;border: 1px #E0E0E0  solid;border-right: none;}
		#text2{width:256px;height: 42px; border: 1px  #E0E0E0  solid;outline: none;}
		#sel{border: none;font-size: 15px;}
		#text3{width: 190px;height: 40px; border: 1px  #E0E0E0  solid;outline: none;}
		#span2{width: 330px;margin-top: 32px;display: inline-block;height: 43px;text-align: center;cursor: pointer;
		line-height: 43px;background-color: #F56600;color: white;font-size: 19px; border: none;outline: none;margin-bottom: 10px;}
		.tup1{display: none;}
		.tup2{display: none;}
		.tup3{display: none;}
		.tup4{display: none;}
		</style>
	</head>
	<body>
		<form    onsubmit="return  form()">
		<div class="body">
		<div class="div1"><img src="logo.png"/></div>
		<span class="span1">注册小米账号</span>
		<div class="main">
		<h4>国家/地区</h4>
		<div class="showcon" onclick="showcontry()">
		<div class="div2">
		<input type="text" id="text1" value=""  name="contry"/>
		 <div class="listcontry" >
		 	<dl class="dl">
		 		<dt style="color: red;">常用</dt>
		 		<dd>中国</dd>
		 		<dd>中国香港</dd>
		 		<dd>中国台湾</dd>
		 		<dd>福建</dd>
		 		<dd>广东</dd>
		 		<dd>广西</dd>
		 		<dd>海南</dd>
		 		<dd>江西</dd>
		 		<dd>安徽</dd>
		 		<dd>浙江</dd>
		 		<dd>湖北</dd>
		 		<dd>河南</dd>
		 		<dd>江苏</dd>
		 	</dl>
		 </div>
		</div><div class="img2">
			<img src="8c16e4857d567742ac7364651b627616.png"/>
		</div>
		</div>
		<div class="div3">
		成功注册账号后，国家/地区将不能被修改	
		</div>
		<h4>手机号码</h4>
		<div class="div4">
		<div class="num">
			<select name="" id="sel">
				<option value="">+86</option>
			</select>
		</div>
		<input type="text" id="text2" value=""  name="phone"/>
		<!--/*手机号码格式错误-->
		<div class="tup1"><img src="ad3b6c9d253d034f8326b36bcd4d74b7.png"/></div>
		<!--输入手机号-->
		<div class="tup2"><img src="aa899b87a9d23a45ba43306ad6400bae.png"/></div>
		</div>
		<h4>图片验证码</h4>
		<input type="text" id="text3" value=""  name="number"/><img src="b82546ce69c98c42b9fbb52218f3c37e.png" style="position: relative; top: 12px;"/>
		<div class="tup3"><img src="205292373ad7c141bebaa90e673c6a13.png"/></div>
		<div class="tup4">
			<img src="8f695734d703d242816dd9e3ce2007eb.png"/>
		</div>
		<input type="submit" id="span2" name="login" value="立即注册"/>
		<p>
        注册帐号即表示您同意并愿意遵守小米<span style="color: black;font-weight: bold;">用户协议</span>和<span style="color: black;font-weight: bold;">隐<br /> 私政策</span>	
		</p>
		</div>
		</div>
<div id="">
		<img src="952d9270b406e743a02e3a1c47a402cd.png"/>
</div>
</form>
<script type="text/javascript">
	var num=/1[35789]\d{9}/;
	var imgnum=/\w{5}/;
	var text1=document.getElementById("text1");
	var text2=document.getElementById("text2");
	var text3=document.getElementById("text3");
	var no1=true;
	var no2=true;
	var no3=true;
	var no4=true;
	text2.onblur=function(){
		if(text2.value==""){
			no1=false;
		var show1=text2.parentNode.children[3];
	      show1.style.display="block";
		}
		else{
			var show1=text2.parentNode.children[3];
	      show1.style.display="none";
		
	if(!(num.test(text2.value))){
		no2=false;
		var show2=text2.parentNode.children[2];
		show2.style.display="block";
	}
	else{
		var show2=text2.parentNode.children[2];
		show2.style.display="none";
	}
	}
		};
	text3.onblur=function(){
		  if(!(imgnum.test(text3.value))){
		  	no3=false;
		  	 var show3=text3.parentNode.children[9];
		  	 show3.style.display="block";
		  }
		  else{
		  	 var show3=text3.parentNode.children[9];
		  	 show3.style.display="none";
		  if (text3.value=="") {
		no4=false;
		var show4=text3.parentNode.children[8];
		  	 show4.style.display="block";
	}
	else{var show4=text3.parentNode.children[8];
		  	 show4.style.display="none";
		
	}
	};
		  }
	var div2=document.querySelector(".showcon");
	 var conten=document.querySelector(".listcontry");
	 var pu=document.getElementById("text1");
	function showcontry(){
		if(conten.style.display=="none"){
			conten.style.display="block";
		}else{
			conten.style.display="none";
		}
	};
	var dds=document.querySelectorAll(".dl dd");
	for (var i = 0; i < dds.length; i++) {
		dds[i].onclick=function(){
			text1.value=this.innerHTML;
		}
	}
	function form(){
		if (text1.value==""||text2.value==""||text3.value=="") {
			return false;
			text2.parentNode.children[2].style.display="block;"
			text3.parentNode.children[8].style.display="block;"
			
		}else if (text1.value!=""&&num.test(text2.value)&&imgnum.test(text3.value)) {
			return true;
		}
	}
	
</script>
	</body>
</html>
